<template>
    <div>
        <transition name="fade"
                    mode="out-in">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition>
        <MusicPlayer :url="currentMusic.file"
                     :paused="paused" />
        <div>
        </div>
    </div>
</template>

<script>
import MusicPlayer from '@/components/MusicPlayer'
import { EventBus } from '@/EventBus'
export default {
    name: 'Main',
    components: {
        MusicPlayer
    },
    data () {
        return {
            musicList: '',
            currentIndex: 0,
            paused: true,
            playMode: 'order',
            transitionName: '',
            currentMusic: {
                file: '#'
            }
        }
    },
    methods: {

    },
    watch: {
        'currentMusic' (currentMusic) {
            EventBus.$emit('pushItem', currentMusic)
            EventBus.$emit('pushLrc', this.currentMusic.lrc)
            EventBus.$emit('pushList', {
                musicList: this.musicList,
                currentIndex: this.currentIndex
            })
        },
        '$route' (to, from) {
            if (to.name === 'List') {
                this.$nextTick(() => {
                    EventBus.$emit('pushList', {
                        musicList: this.musicList,
                        currentIndex: this.currentIndex
                    })
                })
            }
            if (to.name === 'Mplayer') {
                this.$nextTick(() => {
                    EventBus.$emit('pushItem', this.currentMusic)
                    EventBus.$emit('pushPaused', this.paused)
                    EventBus.$emit('pushCurrent')
                })
            }
            if (to.name === 'Lrc') {
                this.$nextTick(() => {
                    EventBus.$emit('pushLrc', this.currentMusic.lrc)
                })
            }
            if (to.name === 'Cover') {
                this.$nextTick(() => {
                    EventBus.$emit('pushItem', this.currentMusic)
                    EventBus.$emit('pushPaused', this.paused)
                })
            }
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.$axios.post('http://39.106.114.31:8080/').then((response) => {
                this.musicList = response.data
                this.$nextTick(() => {
                    this.currentMusic = this.musicList[this.currentIndex]
                    EventBus.$emit('pushList', {
                        musicList: this.musicList,
                        currentIndex: this.currentIndex
                    })
                    EventBus.$emit('pushLrc', this.currentMusic.lrc)
                    EventBus.$on('playModeChange', mode => {
                        this.playMode = mode
                    })
                    EventBus.$emit('pushItem', this.currentMusic)
                    EventBus.$on('playPause', paused => {
                        this.paused = paused
                    })
                    EventBus.$on('prev', () => {
                        let leng = this.musicList.length
                        let index = this.currentIndex
                        if (index <= 0) {
                            this.currentIndex = leng - 1
                        } else {
                            this.currentIndex = this.currentIndex - 1
                        }
                        this.currentMusic = this.musicList[this.currentIndex]
                    })
                    EventBus.$on('next', () => {
                        let leng = this.musicList.length
                        let index = this.currentIndex
                        if (this.playMode !== 'random') {
                            if (index >= leng - 1) {
                                this.currentIndex = 0
                            } else {
                                this.currentIndex = this.currentIndex + 1
                            }
                        } else {
                            let randomSong = Math.floor(Math.random() * leng)
                            if (randomSong === this.currentIndex) {
                                this.currentIndex = Math.floor(Math.random() * leng)
                            } else {
                                this.currentIndex = randomSong
                            }
                        }
                        this.currentMusic = this.musicList[this.currentIndex]
                    })
                    EventBus.$on('changeIndex', musicIndex => {
                        this.paused = false
                        this.currentIndex = musicIndex
                        this.currentMusic = this.musicList[this.currentIndex]
                        EventBus.$emit('pushLrc', this.currentMusic.lrc)
                        EventBus.$emit('pushPaused', this.paused)
                    })
                    EventBus.$on('ended', () => {
                        if (this.playMode === 'cycle') {
                            EventBus.$emit('refreshLrc')
                            EventBus.$emit('ChangeProgress', 0)
                        } else {
                            EventBus.$emit('next')
                            EventBus.$emit('refreshLrc')
                        }
                        this.currentMusic = this.musicList[this.currentIndex]
                    })
                    EventBus.$on('deleteMusicItem', e => {
                        let oldCurIndex = this.currentIndex
                        if (this.musicList.length > 1) {
                            let deleteIndex = this.musicList.indexOf(this.musicList[e])
                            this.musicList = this.musicList.filter(item => item !== this.musicList[e])
                            if (oldCurIndex > deleteIndex) {
                                this.currentIndex = oldCurIndex - 1
                            } else if (oldCurIndex < deleteIndex) {
                                // 不变
                            } else {
                                this.currentIndex = oldCurIndex % this.musicList.length
                            }
                        }
                        this.currentMusic = this.musicList[this.currentIndex]
                    })
                    EventBus.$emit('pushList', {
                        musicList: this.musicList,
                        currentIndex: this.currentIndex
                    })
                })
            }).catch((response) => {
                console.log(response)
            })
        })
    }
}
</script>

<style>
* {
  font-size: 0.25rem;
}
div {
  overflow: hidden;
  width: 3.75rem;
}
</style>
